<template>
  <div class="listbox">
    <h2>房屋租赁明细登记表</h2>
    <table>
      <tr>
        <th>序号</th>
        <th>房屋号</th>
        <th>月租费用</th>
        <th>租赁人</th>
        <th>联系电话</th>
        <th>用水量(吨)</th>
        <th>单价(元)</th>
        <th class="light">水费(元)</th>
        <th>电表初始读数</th>
        <th>电表月底读数</th>
        <th>用电量(度)</th>
        <th>电费单价</th>
        <th class="light">电费(元)</th>
        <th>租赁面积(平米)</th>
        <th>单价(平米)</th>
        <th class="light">物业费(元)</th>
        <th class="light">租价合计(元)</th>
      </tr>
      <tr v-for="item,index in list" :key="index">
        <td>{{index + 1}}</td>
        <td>{{item.No}}</td>
        <td>{{item.price}}</td>
        <td>{{item.user}}</td>
        <td>{{item.phone | hiddenPhone}}</td>
        <td :class="{overTen:item.water>10}">{{item.water}}</td>
        <td>{{item.waterprice}}</td>
        <td class="light">{{item.water * item.waterprice}}</td>
        <td>{{item.powerstart}}</td>
        <td>{{item.powerend}}</td>
        <td>{{item.powerend - item.powerstart}}</td>
        <td>{{item.powerprice}}</td>
        <td class="light">{{item.powerprice * (item.powerend - item.powerstart)}}</td>
        <td>{{item.area}}</td>
        <td>{{item.areaprice}}</td>
        <td class="light">{{item.area * item.areaprice}}</td>
        <td class="light">{{item.price + item.water * item.waterprice + item.powerprice * (item.powerend - item.powerstart) + item.area * item.areaprice}}</td>
      </tr>
      <tr>
        <td colspan="17">总计： {{total}} 元</td>
      </tr>
    </table>
    <div class="tip">
      <p>备注：</p>
      <p>水费 = 用水量 * 水单位</p>
      <p>电费 = 用电量 * 电单位</p>
      <p>物业费 = 租赁面积 * 单位</p>
      <p>房屋租金 = 月租费用 + 水费 + 电费 + 物业费</p>
      <p>用水量超出10吨，字体红色加粗显示！！！</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      rentInfo: [],
    };
  },
  created() {
  },
  computed: {
    ...mapState({
      list: (state) => state.rentInfo.list,
    }),

    // 水费
    total(){
      return this.list.reduce((pre,cur)=>{
        return  pre + cur.price + cur.water * cur.waterprice + cur.powerprice * (cur.powerend - cur.powerstart) + cur.area * cur.areaprice
      },0)
    }

  },
  filters:{
    // 手机号带*
    hiddenPhone(phone){
      // 方法一：
      // let ph = phone.toString();
      // return ph.slice(0,3) + ph.slice(3,7).replace(ph.slice(3,7),'****') + ph.slice(7,12)

      // 方法二：
      let ph = phone.toString().split('')
      ph.splice(3,4,'****')
      return ph.join('')
    }
  },
  methods: {
    ...mapActions({
      updateRentInfo: "rentInfo/updateRentInfo",
    }),
    showList(){
        this.updateRentInfo()
    }
  },
};
</script>

<style lang="less" scoped>
.listbox {
  padding: 10px;
  h2 {
    background-color: #505960;
    color: #fff;
    line-height: 60px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
  }
  table {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    th,
    td {
      border: 1px solid #000;
      line-height: 35px;
      font-size: 13px;
    }
    th {
      font-weight: 600;
    }
    .light {
      background-color: #e5d2d9;
    }
    .overTen{
      color: red;
    }
  }
  .tip {
    margin: 30px 0 0 0;
    p {
      color: #793d8c;
      font-size: 13px;
    }
  }
}
</style>
